<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>微图片</title>
<style>
*{margin:0;padding:0;}
html{overflow-y:scroll}
body {background:url(http://mat1.gtimg.com/www/mb/skin/jd/bhxp/bg.jpg) top center no-repeat fixed #E5E5E5;font-family:"微软雅黑";}
img{border:0;}
.header{height:35px;width:100%;border-bottom:1px solid #333;margin-top:0;top:0;left:0;z-index:100;filter:alpha(opacity=80);opacity:0.8;background:#2d2d2d;}
.header .nav_item{margin:0 auto;width:1010px;}
.header .nav_item ul{list-style:none;}
.header .nav_item li{float:left;}
.header .nav_item .nav_r li{float:right;}
.header .nav_item .nav_r li a{padding:5px 5px;height:25px;}
.header .nav_item a{color:#fff;font-size:14px;display:block;float:none; margin-top:1px;padding:8px 10px;line-height:17px;text-decoration:none;}
.header .nav_item a:hover,.nav .nav_item li:hover{color:#fff;background:#000;}
.header .nav_item .logo{width:120px;height:35px;background:url(static/img/logo.png) no-repeat;margin:0px 5px;padding:0;}
.header .nav_item .logo:hover{background:url(static/img/logo.png) no-repeat;}
.head_clear{height:0;width:100%;display:block;}
.container {width:1000px;margin:10px auto;}
.column {display: inline-block;vertical-align: top;}
.pic_a {display: block;padding:2px;margin-bottom:5px;border: 1px solid #ccc;background-color: #fff;text-decoration: none;}
.pic_a img {display: block;	margin: 0 auto 2px;	border: 0;	vertical-align: bottom;}
</style>
</head>
<body>
<div class="header">
	<div class="nav_item">
		<ul>
			<li><a class="logo" href="./index.html" title="微图片">&nbsp;</a></li>
		</ul>
		<ul class="nav_r" id="info">
			<li id="qqLoginBtn"><a href="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=100280222&redirect_uri=http%3A%2F%2Ftupian.aliapp.com%2Findex.html"><img src="http://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_3.png"></a></li>
		</ul>
	</div>
</div>
<div class="head_clear"></div>
<div class="container" id="container"></div>
<script>
var waterFall = {
	container: document.getElementById("container"),
	columnNumber: 1,
	columnWidth: 196,
	// P_001.jpg ~ P_160.jpg
	rootImage: "http://cued.xunlei.com/demos/publ/img/",
	indexImage: 0,
	
	scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
	detectLeft: 0,
	
	loadFinish: false,
	
	// 返回固定格式的图片名
	getIndex: function() {
		var index = this.indexImage;
		if (index < 10) {
			index = "00" + index;	
		} else if (index < 100) {
			index = "0" + index;	
		}
		return index;
	},
	
	// 是否滚动载入的检测
	appendDetect: function() {
		var start = 0;
		for (start; start < this.columnNumber; start++) {
			var eleColumn = document.getElementById("waterFallColumn_" + start);
			if (eleColumn && !this.loadFinish) {
				if (eleColumn.offsetTop + eleColumn.clientHeight < this.scrollTop + (window.innerHeight || document.documentElement.clientHeight)) {
					this.append(eleColumn);
				}
			}			
		}
		
		return this;
	},
	
	// 滚动载入
	append: function(column) {
		this.indexImage += 1;
		var html = '', index = this.getIndex(), imgUrl = this.rootImage + "P_" + index + ".jpg";
		
		// 图片尺寸
		var aEle = document.createElement("a");
		aEle.href = "###";
		aEle.className = "pic_a";
		aEle.innerHTML = '<img src="'+ imgUrl +'" />';
		column.appendChild(aEle);
		
		if (index >= 80) {
			//alert("图片加载光光了！");
			this.loadFinish = true;
		}
		
		return this;
	},
	
	// 页面加载初始创建
	create: function() {
		this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);
		
		var start = 0, htmlColumn = '', self = this;
		for (start; start < this.columnNumber; start+=1) {
			htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ start +'" class="column" style="width:'+ this.columnWidth +'px;">'+ 
				function() {
					var html = '', i = 0;
					for (i=0; i<5; i+=1) {
						self.indexImage = start + self.columnNumber * i;
						var index = self.getIndex();
						html = html + '<a href="view.html" class="pic_a" target="_blank"><img src="'+ self.rootImage + "P_" + index +'.jpg" width="190"/></a>';
					}
					return html;	
				}() +
			'</span> ';	
		}
		htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>';
		
		this.container.innerHTML = htmlColumn;
		
		this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;
		return this;
	},
	
	refresh: function() {
		var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0;
		for (start; start < this.columnNumber; start+=1) {
			var arrColumn = document.getElementById("waterFallColumn_" + start).innerHTML.match(/<a(?:.|\n|\r|\s)*?a>/gi);
			if (arrColumn) {
				maxLength = Math.max(maxLength, arrColumn.length);
				// arrTemp是一个二维数组
				arrTemp.push(arrColumn);
			}
		}
		
		// 需要重新排序
		var lengthStart, arrStart;
		for (lengthStart = 0; lengthStart<maxLength; lengthStart++) {
			for (arrStart = 0; arrStart<this.columnNumber; arrStart++) {
				if (arrTemp[arrStart][lengthStart]) {
					arrHtml.push(arrTemp[arrStart][lengthStart]);	
				}
			}	
		}
		
		
		if (arrHtml && arrHtml.length !== 0) {
			// 新栏个数		
			this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);
			
			// 计算每列的行数
			// 向下取整
			var line = Math.floor(arrHtml.length / this.columnNumber);
			
			// 重新组装HTML
			var newStart = 0, htmlColumn = '', self = this;
			for (newStart; newStart < this.columnNumber; newStart+=1) {
				htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ newStart +'" class="column" style="width:'+ this.columnWidth +'px;">'+ 
					function() {
						var html = '', i = 0;
						for (i=0; i<line; i+=1) {
							html += arrHtml[newStart + self.columnNumber * i];
						}
						// 是否补足余数
						html = html + (arrHtml[newStart + self.columnNumber * line] || '');
						
						return html;	
					}() +
				'</span> ';	
			}
			htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>';
		
			this.container.innerHTML = htmlColumn;
			
			this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;
			
			// 检测
			this.appendDetect();
		}
		return this;
	},
	
	// 滚动加载
	scroll: function() {
		var self = this;
		window.onscroll = function() {
			// 为提高性能，滚动前后距离大于100像素再处理
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) {
				self.scrollTop = scrollTop;
				self.appendDetect();	
			}
			
		};
		return this;
	},
	
	// 浏览器窗口大小变换
	resize: function() {
		var self = this;
		window.onresize = function() {
			var eleDetect = document.getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft;
			if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 50) {
				// 检测标签偏移异常，认为布局要改变
				self.refresh();	
			}
		};
		return this;
	},
	init: function() {
		if (this.container) {
			this.create().scroll().resize();	
		}
	}
};
waterFall.init();
</script>
</body>
</html>
